<template>
  <div class="collectionchannel">
    <!--采集通道  collectionChannel -->
    <div class="con">
      <div class="title-top">
        <span @click="aaa">通道列表</span>
        <div class="mybtn" @click="addChannel">新增通道</div>
      </div>
      <div class="mytable">
        <el-table :data="tableData" height="100%" stripe style="width: 100%;">
          <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="variableName" label="监测变量名"></el-table-column>
          <el-table-column label="合闸配置" min-width="120">
            <template #default="{row}">
              <div class="p">变量：{{row.variableForOpen}}</div>
              <div class="p">地址：{{row.adressForOpen}},值：{{row.valueForOpen}}</div>
            </template>
          </el-table-column>
          <el-table-column label="分闸配置" min-width="120">
            <template #default="{row}">
              <div class="p">变量：{{row.variableForClose}}</div>
              <div class="p">地址：{{row.adressForClose}},值：{{row.valueForClose}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="enable" label="状态" width="100">
            <template #default="{row}">
              <span v-if="row.enable" class="q">启用中</span>
              <span v-else class="j">禁用中</span>
            </template>
          </el-table-column>
          <el-table-column prop="confirmtime" label="操作" width="200" align="center">
            <template #default="{row}">
              <div class="btnssss" style="display: flex;justify-content: center; align-items: center;">
                <span @click="handleCurrentChange(row)" style="color:#368ED9">编辑</span>
                <span class="line"></span>
                <span @click="deletefn(row)" style="color:#FF1D1D">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 新增/修改 -->
      <el-dialog width="750px" draggable :title="caozuoType" :close-on-click-modal='false' v-model="addeditflagline">
        <div class="leftandrightdialog">
          <div style="width: 50%;"> 
            <div class="items">
              <div class="leftname"><span>*</span>监控变量名：</div>
              <el-input   v-model="temp.variableName" placeholder="请输入"></el-input> 
            </div>
            <div class="items">
              <div class="leftname"><span>*</span>合闸变量：</div>
              <el-input @click="bbb('variableForOpen')" readonly v-model="temp.variableForOpen" placeholder="请输入"></el-input>
            </div>

            <div class="items">
              <div class="leftname"><span>*</span>分闸变量：</div>
              <el-input readonly @click="bbb('variableForClose')" v-model="temp.variableForClose" placeholder="请输入"></el-input>
            </div>
            <div class="items">
              <div class="leftname"><span>*</span>合闸地址：</div>
              <el-input v-model="temp.adressForOpen" placeholder="请输入"></el-input>
            </div>
            <div class="items">
              <div class="leftname"><span>*</span>分闸地址：</div>
              <el-input v-model="temp.adressForClose" placeholder="请输入"></el-input>
            </div>

            <div class="items">
              <div class="leftname"><span>*</span>合闸值：</div>
              <el-input v-model="temp.valueForOpen" placeholder="请输入"></el-input>
            </div>
            <div class="items">
              <div class="leftname"><span>*</span>分闸值：</div>
              <el-input v-model="temp.valueForClose" placeholder="请输入"></el-input>
            </div>
            <div class="items">
              <div class="leftname"><span>*</span>分合闸反转：</div>
              <el-input v-model="temp.isReverse" placeholder="请输入"></el-input>
            </div>
            <div class="items">
              <div class="leftname">启用禁用：</div>
              <el-radio v-model="temp.enable" :label="1">启用中</el-radio>
              <el-radio v-model="temp.enable" :label="0">禁用中</el-radio>
            </div>

          </div>
  
          	<el-scrollbar style="height:calc(100% - 175px);width: 50%;">
                       <span style="margin-left: 10px;">请选择{{bianliang=='variableForOpen'?'合闸变量':'分闸变量'}}</span>
						<el-tree class="filter-tree" :data="treeList"   node-key="keyId" :props="defaultProps"
							empty-text="暂无数据" :filter-node-method="filterNode"  @node-click="handleNodeClick"
							highlight-current ref="tree">
							<template #default="{ node, data }">
								<img src="../../../public/static/image/elTree/1.9.png" style="margin-right: 2px;"
									v-if="node.data.Content.Category && node.data.Content.Category == 'Organization'" /> 
								<img src="../../../public/static/image/elTree/variable.png"  style="margin-right: 2px;"
									v-if="node.data.Content.variableName" /> 
								<img src="../../../public/static/image/elTree/2.1.png"
									style="margin-right: 2px; position: relative;top: 1px;"
									v-if="node.data.Content.Category && node.data.Content.Category == 'Device'" />
								<span style="padding-left: 5px;">{{ node.data.Content.Name }}</span>
							</template>
						</el-tree>
					</el-scrollbar>
        </div>
        <div class="el-loading-mask" v-show="diaisMask">
          <div class="el-loading-spinner">
            <svg viewBox="25 25 50 50" class="circular">
              <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
            </svg>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="addeditflagline = false">取 消</el-button>
            <el-button class="last-el-button" @click="addpassageway" type="primary">确 定</el-button>
          </div>
        </template>
      </el-dialog>


    </div>
  </div>
</template>

<script>

  import {
    getConfig,
    deleteConfig,
    saveConfig,
    statementVariableTree
  } from "../../api/variableDevice";
  import { useCounterStore } from '../../stores/counter'
  export default {

    data() {
      return {
        bianliang:'variableForOpen',
        defaultProps: {
				children: 'ChildDatas',
				label: 'Content.Name'
			},
     
        addeditflagline: false,//新增修改弹窗
        diaisMask: false,//弹窗的缓冲
        treeList: [],
        temp: {

        },//新增修改的参数

        tableData: [],
        caozuoType: "新增",

      };
    },
    //利用计算属性
    computed: {
      unitId() {
        return useCounterStore().getNowUnit
      }
    },
    mounted() {
      this.aaa();//获取选择树形
      this.getList();//获取列表数据
    },


    methods: {
      handleNodeClick(v) {
        if (v.Content&&v.Content.variableName) {
          // console.log(v.Content.variableName,'111111');
          this.temp[this.bianliang]=v.Content.variableName
        } 
      },
      bbb(v){
      //  console.log(v);
       this.bianliang = v;
      },
      aaa() {
        // console.log(this.unitId);
        statementVariableTree({ unitId: this.unitId.id }).then(res => {
          // console.log("查看", res);
          if (res.code == 200) {
            this.handleData(res)
          }

        })
      },
      //处理企业数据
      handleData(data) {
        data = JSON.parse(JSON.stringify(data).replace(/appTypes/g, 'ChildDatas').replace(/groupName/g, "Name").replace(/groupIdAndName/g, "Content").replace(/groupId/g, "Id").replace(/appTypeInfo/g, "Content").replace(/appName/g, "Name"))
        var filterArr = []
        var recursiveFunction = function () {
          const getStr = function (list) {
            list.forEach(function (row) {
              row.label = row.Content.Name;
              if (row.ChildDatas.length != 0) {

                getStr(row.ChildDatas)
              } else {
                if (row.Content.groups != null) {
                  filterArr = row.Content.groups.filter(v => v.Content.Name == '开关状态')

                  // row.ChildDatas=filterArr
                  if (filterArr.length != 0) {

                    filterArr[0].ChildDatas = filterArr[0].ChildDatas.filter(val => val.Content.Name == '开关量')
                    filterArr[0].ChildDatas.forEach(t => {
                      t.deviceList = {
                        "deviceNames": row.Content.Name,
                        "deviceIds": row.Content.Id,
                      }
                    })

                    row.ChildDatas = filterArr
                  } else {
                    row.ChildDatas = []
                  }
                  row.Content.groups = []
                }
              }
            })
          }
          getStr([data.data])
        }
        recursiveFunction()
        this.treeList = [data.data];
      
      },
  

      getList() {
        getConfig().then(res => {
          if (res.code == 200) {
            this.tableData = res.data;
          }
        })
      },
      //新增
      addChannel() {
        this.temp = {
          enable: 1,
        }

        this.addeditflagline = true
      },



      //新增修改通道
      addpassageway() {
        if (this.temp.variableName == '') {
          this.$message({ showClose: true, message: '监控变量名不能为空', type: 'warning' });
          return
        }
        if (this.temp.variableForOpen == '') {
          this.$message({ showClose: true, message: '合闸变量不能为空', type: 'warning' });
          return
        }
        if (this.temp.variableForClose == '') {
          this.$message({ showClose: true, message: '分闸变量不能为空', type: 'warning' });
          return
        }
        if (this.temp.adressForOpen == '') {
          this.$message({ showClose: true, message: '合闸地址不能为空', type: 'warning' });
          return
        }
        if (this.temp.adressForClose == '') {
          this.$message({ showClose: true, message: '分闸地址不能为空', type: 'warning' });
          return
        }
        if (this.temp.valueForOpen == '') {
          this.$message({ showClose: true, message: '合闸值不能为空', type: 'warning' });
          return
        }
        if (this.temp.valueForClose == '') {
          this.$message({ showClose: true, message: '分闸值不能为空', type: 'warning' });
          return
        }
        if (this.temp.isReverse == '') {
          this.$message({ showClose: true, message: '分合闸反转不能为空', type: 'warning' });
          return
        }

        // console.log(this.temp);
        saveConfig(this.temp).then(res => {
          if (res.code == 200) {
            this.getList()
            if (this.temp.id) {
              this.$message({ showClose: true, message: '修改成功', type: 'success' });
            } else {
              this.$message({ showClose: true, message: '添加成功', type: 'success' });
            }
            this.addeditflagline = false
          }
        })
      },
      //删除通道
      deletefn(row) {

        this.$confirm(`是否要删除此通道？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          deleteConfig([row.id]).then(res => {

            if (res.code == 200) {
              this.$message({ showClose: true, message: '删除成功', type: 'success' });
              this.getList()
            } else {
              this.$message.error('删除失败，' + res.msg)
            }
          }).catch(error => {

          })



        }).catch(() => {
          // ...
        });
      },
      //编辑
      handleCurrentChange(val) {

        if (val == null) {
          return
        }

        this.temp = JSON.parse(JSON.stringify(val))
        this.addeditflagline = true
      },

    },

  };
</script>
<style lang="scss" scoped>
  .collectionchannel {
    width: 100%;
    height: 100%;
    position: relative;

    .q {
      background-color: #dcfce7;
      padding: 8px;
      border-radius: 20px;
    }

    .j {
      background-color: #fef9c3;
      padding: 8px;
      border-radius: 20px;
    }

    .btnssss span {
      cursor: pointer;
    }

    .line {
      margin: 0px 12px;
      display: inline-block;
      width: 1px;
      height: 18px;
      background-color: #E6E6E6;
    }

    .con {
      width: 100%;
      height: 100%;
      background-color: #fff;
      box-sizing: border-box;

      .title-top {
        width: 100%;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #E6E6E6;
        padding: 0px 12px;
        box-sizing: border-box;

        span {
          font-size: 14px;
          color: #1A1A1A;
        }

      }

      .mytable {
        width: 100%;
        height: calc(100% - 80px);
        padding: 0px 12px;
        box-sizing: border-box;
        margin-top: 12px;

        .mysort {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .mysort-text {
          color: #2178F1;
        }
      }

      .edit-info {
        width: 100%;
        height: calc(100% - 480px);
        margin-top: 12px;
        padding: 0px 12px;
        box-sizing: border-box;

        .info-con {
          width: 100%;
          height: 100%;
          border: 1px solid #E6E6E6;
          border-radius: 4px;
          background-color: #FAFAFA;
          padding: 20px 20px 12px 20px;
          box-sizing: border-box;

          .infotitle {
            font-size: 13px;
            color: #1A1A1A;
          }

          .info-body {
            width: 100%;
            height: calc(100% - 102px);

            .body-items {
              width: 100%;
              height: 100%;
              display: flex;
              flex-wrap: wrap;
              align-content: flex-start;

              .body-item {
                width: 440px;
                height: 44px;
                margin-right: 40px;
                display: flex;
                align-items: center;

                .leftname {
                  width: 72px;
                  height: 100%;
                  text-align: right;
                  line-height: 44px;
                  color: #666666;
                  font-size: 12px;
                  margin-right: 8px;
                }

                :deep(.el-input__inner) {
                  background-color: transparent;
                }

                .tips {
                  font-size: 12px;
                  color: #666666;
                  margin-left: 8px;
                }

                .tong {
                  margin-left: 4px;
                  color: #1A1A1A;
                  font-size: 12px;
                }


              }
            }
          }

          .bottom-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .quxiao {
              margin-left: 8px;
              color: #666666;
              background-color: #fff;
              border: 1px solid #cccccc;
            }
          }
        }
      }
    }
  }

  .infoitems {
    display: flex;
    align-items: center;

    .items {
      width: 50%;
    }

    .itemright {
      margin-right: 20px;
    }

  }

  .body-items {
    margin-top: 10px;

    .infoitems {
      .items {
        width: 33%;
      }
    }

  }

  .radio-type {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .myname {
      width: 60px;
      text-align: right;
      font-size: 12px;
      color: #666666;
      position: relative;
    }

    .left-type {
      display: flex;

      .myname {
        top: 7px;
        white-space: nowrap;
      }
    }

    .myradio {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .right-tongdao {
      display: flex;
      align-items: center;
      position: relative;
      top: -1px;

      .tong {
        margin-left: 4px;
        color: #1A1A1A;
        font-size: 12px;
      }
    }
  }
</style>